<template>
  <div class="table">
    <tiny-grid
        ref="basicGridRef"
        :fetch-data="fetchData"
        :auto-resize="true"
        :pager="pagerConfig"
        :highlight-hover-row="true"
    >
      <template #toolbar>
        <div class="search">
          <tiny-button type="primary" native-type="submit" @click="add"> 添加</tiny-button>
        </div>
      </template>
      <tiny-grid-column type="index" width="60"></tiny-grid-column>

      <tiny-grid-column
          field="name"
          show-overflow
          title="姓名"

      ></tiny-grid-column>
      <tiny-grid-column field="account" title="学号"></tiny-grid-column>
      <tiny-grid-column field="studentClass" title="学院"></tiny-grid-column>
      <tiny-grid-column field="sex" title="性别"></tiny-grid-column>
      <tiny-grid-column field="authority" title="权限"></tiny-grid-column>

      <tiny-grid-column title="操作" width="100">
        <template #default="data">
          <div class="demo-custom-column">
            <tiny-icon-edit class="tiny-svg-size" @click="clickHandler(data.row)"></tiny-icon-edit>
            <tiny-icon-rich-text-delete-table  class="tiny-svg-size" @click="Delete(data.row)"></tiny-icon-rich-text-delete-table>
          </div>
        </template>
      </tiny-grid-column>
    </tiny-grid>
  </div>

  <tiny-modal v-model="visible" type="confirm" show-footer :is-form-reset="false" :title="'修改'"
              :rules="rules"
              @confirm="handleConfirm">
    <tiny-form :model="form" label-width="80px" label-position="left" :label-align="true" ref="formRef">
      <tiny-form-item label="姓名" prop="name" required>
        <tiny-input v-model="form.name"></tiny-input>
      </tiny-form-item>
      <tiny-form-item label="学号" prop="account" required>
        <tiny-input v-model="form.account"></tiny-input>
      </tiny-form-item>
      <tiny-form-item label="班级" prop="studentClass" required>
        <tiny-input v-model="form.studentClass"></tiny-input>
      </tiny-form-item>
      <tiny-form-item label="密码" prop="password" required>
        <tiny-input v-model="form.password"></tiny-input>
      </tiny-form-item>
      <tiny-form-item label="性别" prop="sex" required>
        <tiny-input v-model="form.sex"></tiny-input>
      </tiny-form-item>
      <tiny-form-item label="权限" prop="authority" required>
        <tiny-input v-model="form.authority"></tiny-input>
      </tiny-form-item>
    </tiny-form>
  </tiny-modal>
</template>

<script setup>
import {ref, inject} from 'vue'
import {
  Grid as TinyGrid, GridColumn as TinyGridColumn, Modal as TinyModal, Pager,
  Input as TinyInput, Button as TinyButton,
  Form as TinyForm,
  FormItem as TinyFormItem, Notify
} from '@opentiny/vue'
import {iconEdit,IconRichTextDeleteTable} from '@opentiny/vue-icon'

const TinyIconEdit = iconEdit()
const TinyIconRichTextDeleteTable = IconRichTextDeleteTable()
//0 修改模式 1 添加模式
const mode = ref(0)

function clickHandler(row) {
  form.value = row
  visible.value = true
  mode.value = 0
}

const add = () => {
  for (var i in form.value) {
    form.value[i] = ""
  }
  visible.value = true
  mode.value = 1
}

const formRef = ref(null)
const form = ref({
  name: "",
  sex: 0,
  password: "",
  studentClass: "",
  account: "",
  id: "",
  authority: ""
})
const visible = ref(false)

const axios = inject('axios')

const size = ref(Math.round((window.innerHeight - 140) / 50))

const Delete = (row)=>{
  axios.delete("/user/"+row.id).then(res=>{
    Notify({
      type: 'success',
      message: '删除成功',
      position: 'top-right'
    })
  }
  ).catch(err=>{
    Notify({
      type: 'error',
      message: '删除失败',
      position: 'top-right'
    })
  })
}
const basicGridRef = ref()
const fetchData = ref({
  api: getData,
})


const pagerConfig = ref({
  component: Pager,
  attrs: {
    currentPage: 1,
    pageSize: size.value,
    total: 0,
    align: 'right',
    layout: 'total, prev, pager, next'
  }
})

async function getData({page}) {
  const {currentPage, pageSize} = page
  const data = await axios.get("/user/manage/list")

  return Promise.resolve({
    result: data?.data?.data,
    page: {total: 3}
  })
}

const update = () => {
  axios.put("user/" + form.value.id, form.value).then(res => {
    Notify({
      type: 'success',
      message: '修改成功',
      position: 'top-right'
    })
    basicGridRef.value.handleFetch()
  })
}
const Add = () => {
  axios.post("/user/add", form.value).then(res => {
    Notify({
      type: 'success',
      message: '添加成功',
      position: 'top-right'
    })
  })

}
const handleConfirm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (mode.value == 0) {
        update()
      } else {
        Add()
      }
    } else {
      Notify({
        type: 'warning',
        message: '请完整填写信息',
        position: 'top-right'
      })
    }
  })
}
</script>
<style lang="less" scoped>
.table {
  padding: 10px;
}

.tiny-button {
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 8px;
}

.search {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  background-color: #F2F6FC;

  button {
    transform: translateY(5px);

  }

  .tiny-input {
    margin-right: 10px;
  }

}
.tiny-svg{
  font-size: 14px;
  margin-right: 10px;
}


</style>